<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>头像</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" type="text/css" href="css/site.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="js/vue-toasted.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 头部 -->
			<van-nav-bar id="S_bar" fixed=true title="个人资料" left-arrow @click-left="onClickLeft"></van-nav-bar>
			<!-- 内容 -->
			<van-cell-group>
				<van-cell value="更换头像" @click="showAlert = true" center="true" is-link>
					<img class="Img" slot="title" v-model="imgUrl" :src="imgUrl" width="60px" onerror="onerror=null;src='img/PingTouGe.jpg'">
				</van-cell>
			</van-cell-group>
			<van-cell-group>
				<van-cell title="昵称" :value="NickName" is-link @click="onName"></van-cell>
				<van-cell title="手机号码" :value="Phone" is-link @click="onPhone"></van-cell>
			</van-cell-group>
			<van-actionsheet v-model="showAlert" :actions="actions" @select="onSelect" cancel-text="取消"></van-actionsheet>

		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					NickName: "",
					Phone: "",
					actions: [{
							id: 1,
							name: '拍照'
						},
						{
							id: 2,
							name: '从相册选取'
						}
					],
					showAlert: false,
					imgUrl: "",
					userKey: localStorage.getItem("Key")

				},
				methods: {
					onClickLeft() {
						plus.webview.close(plus.webview.currentWebview());
					},
					onName(){
						plus.webview.show(plus.webview.create("profile_name.html","profile_name"),"slide-in-left");
					},
					onPhone(){
						plus.webview.show(plus.webview.create("profile_phone.html","profile_phone"),"slide-in-left");
					},
					onSelect(item) { //修改头像
						if (item.id == 1) {
							var cmr = plus.camera.getCamera();
							cmr.captureImage(function(p) {
								plus.io.resolveLocalFileSystemURL(p, function(entry) {
									var imgUrl = entry.toLocalURL();
									vm.$dialog.confirm({
										title: '提示',
										message: '您确定上传该图片作为头像吗?'
									}).then(() => {
										var toast = vm.$toast.loading({
											duration: 0,
											forbidClick: true,
											message: '正在上传'
										});
										var task = plus.uploader.createUpload("http://dsapi.ysd3g.com/api/uploadavatarimage?key=" + vm.userKey + "", {
												method: "POST",
												blocksize: 204800,
												priority: 100
											}, //最大上传大小200k,任务优先级100
											function(t, status) {
												//上传成功
												if (status == 200) {
													var responseText = JSON.parse(task.responseText);
													//plus.storage.setItem("imgUrl", responseText.AvatarImage);//头像上传成功重新赋值
													console.log(responseText)
													
													var userData = JSON.parse(plus.storage.getItem("userData"));
													userData.AvatarImage = responseText.AvatarImage; //头像上传成功重新赋值
													plus.storage.setItem("userData", JSON.stringify(userData));
													
													vm.$toast.success("上传成功");
													vm.$toast.clear();
// 													plus.webview
// 													plus.webview.getWebviewById("personal").reload(false);
// 													plus.webview.currentWebview().reload(false); //true 设置使用缓存，加快读取速度

												} else { //上传失败
													console.log("上传失败")
													vm.$toast.fail("上传失败：" + status);
													vm.$toast.clear();
												}
											}
										);
										task.addFile(imgUrl, {
											key: "imgUrl"
										});
										task.start();
										vm.showAlert = false;
									}).catch(() => {
										// on cancel
									});
								});
							}, function(e) {}, {
								index: 1,
								filename: "_doc/camera/"
							}); //选择主摄像头，路径保存到_doc/camera/下
							//plus.io.resolveLocalFileSystemURL( url, succesCB, errorCB );//通过url获取 _doc/camera/下的图片
						} else if (item.id == 2) {
							// 从相册中选择图片
							plus.gallery.pick(function(path) {
								//成功选择回调 path是图片路径
								vm.$dialog.confirm({
									title: '提示',
									message: '您确定上传该图片作为头像吗?'
								}).then(() => {
									var toast = vm.$toast.loading({
										duration: 0, // 持续展示 toast
										forbidClick: true, // 禁用背景点击
										message: '正在上传'
									});
									//开始上传任务
									var task = plus.uploader.createUpload("http://dsapi.ysd3g.com/api/uploadavatarimage?key=" + vm.userKey +
										"", {
											method: "POST",
											blocksize: 204800,
											priority: 100
										}, //最大上传大小200k,任务优先级100
										function(t, status) {
											//上传成功
											if (status == 200) {
												var responseText = JSON.parse(task.responseText);
												localStorage.setItem("imgUrl",responseText.AvatarImage);//头像上传成功重新赋值
												var userData1 = JSON.parse(localStorage.getItem("userData1"));
												userData1.UserData.AvatarImage = responseText.AvatarImage; //头像上传成功重新赋值
												localStorage.setItem("userData1", JSON.stringify(userData1));
												
												vm.$toast.success("上传成功");
												//刷新userindex页面 将图片路径同步到data的imgUrl
												plus.webview.getWebviewById("userIndex").reload(true);
												vm.imgUrl = userData1.UserData.AvatarImage;
												vm.$toast.clear();
											} else { //上传失败
												vm.$toast.fail("上传失败：" + status);
												vm.$toast.clear();
											}
										}
									);
									task.addFile(path, {
										key: "imgUrl"
									});
									task.start();
									vm.showAlert = false;
								}).catch(() => {
									// on cancel
								});
							}, function(e) {
								//选择图片错误回调
								var code = e.code; // 错误编码
								var message = e.message; // 错误描述信息
								vm.$toast.fail(message);
							}, {
								filter: "image"
							}); //filter 默认过滤其他文件，只剩图片
						} else {
							this.$toast.fail("选择了错误的选项!");
						}
					}
				},
				mounted() {
					var userData1 = JSON.parse(localStorage.getItem("userData1"));
					console.log(userData1)
					this.NickName = userData1.UserData.NickName;
					this.Phone = userData1.UserData.Phone;
					this.imgUrl = userData1.UserData.AvatarImage;
				}
			})
		</script>
	</body>
</html>
